<template>
  <div class="c-friend-item" :class="{ selected: route.params.id == user.userId }" @click="toChat">
    <div class="item__avatar">
      <Images class="u-avatar" :src="user?.avatar" />
    </div>
    <div class="item__info">
      <div class="info__heder">
        <div class="header__name" v-text="user?.nickName"></div>
        <div class="header__day" v-text="lastMessage.createTime"></div>
      </div>
      <!-- 对方的最后一条信息 -->
      <div class="info__centent" v-text="lastMessage.content"></div>
    </div>
  </div>
</template>

<script setup>
import Images from '@/components/Images/Index.vue';
import { useRoute } from 'vue-router';
const emits = defineEmits(["toChat"])
const route = useRoute();
const { user, lastMessage } = defineProps({
  user: {
    type: Object,
    default: {

    }
  },
  lastMessage: {
    type: Object,
    default: {},
  }
})

function toChat (e) {
  emits("toChat", user)
}
</script>

<style scoped lang="scss">
.c-friend-item {
  user-select: none;
  // height: 64px;
  max-width: 100%;
  // background-color: red;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px;
  box-sizing: border-box;
  border-bottom: 1px solid #ccc;


}

.selected {
  background-color: rgb(208, 208, 208);
  color: white !important;
}

.item__info {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  gap: 6px;

  .info__heder {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .header__name {
      color: black;
      font-size: 16px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: left;
      max-width: 6em;

    }

    .header__day {
      color: rgb(138, 138, 138);
      font-size: 14px;
    }
  }

  .info__centent {
    font-size: 14px;
    color: rgb(138, 138, 138);
    text-align: left;
  }
}
</style>